<template>
  <div class="cinema-detail-films-container">
    <div class="main">
      <MovieList :list="list" v-model="modelValue" @onchange="onChangeMovie"></MovieList>
    </div>
    <div class="info" v-if="currentCinemaInfo">
      <div class="top">
        <div class="title">{{currentCinemaInfo.name}}</div>
        <div class="score" v-if="currentCinemaInfo.grade">
          <div class="name">评分</div>
          <div class="value">{{currentCinemaInfo.grade}}</div>
        </div>
      </div>
      <div class="bottom">
        <div class="desc">
         {{currentCinemaInfo.casfilm_typest}} {{currentCinemaInfo.cast}}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import MovieList from "../../components/movie-list/index.vue";
import { ref, toRefs, watch } from "vue";
import { onMounted } from "vue";
const props = defineProps({
  //子组件接收父组件传递过来的值
  list: {
    type: Array<any>,
    required: true,
  },
  modelValue: {
    type: Number,
    required: true,
  },
});
//使用父组件传递过来的值
const { list, modelValue } = toRefs(props);
const currentCinemaInfo:any = ref(null)
const emit = defineEmits(["onchange"]);
const onChangeMovie = (id) => {
    emit('onchange', id);
}
onMounted(()=>{
  getCurrentCinemaInfo()
})
watch(modelValue,()=>{
  getCurrentCinemaInfo()
})
const getCurrentCinemaInfo = () => {
  const currentFilmId = modelValue.value
  currentCinemaInfo.value = list.value.find((item)=>{
    return item.film_id === currentFilmId
  })
}
</script>
<style lang="scss">
.cinema-detail-films-container {
  display: flex;
  flex-direction: column;
  background: #fff;
  .info {
    padding: 0 100px 25px 100px;
    display: flex;
    flex-direction: column;
    .top {
      display: flex;
      flex-direction: row;
      flex: 1;
      justify-content: center;
      .title {
        font-weight: 500;
        color: #15181d;
        font-size: 32px;
        line-height: 64px;
        display: -webkit-box;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .score {
        width: 120px;
        margin-left: 25px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .name {
          font-size: 24px;
          line-height: 38px;
          color: #858a99;
        }
        .value {
          margin-left: 10px;
          font-weight: 500;
          color: #ffc800;
          font-size: 42px;
          line-height: 48px;
        }
      }
    }
    .bottom {
      display: flex;
      flex-direction: column;
      .desc {
        font-size: 24px;
        color: #858a99;
        display: -webkit-box;
        /* autoprefixer: ignore next */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
      }
    }
  }
}
</style>
